<template>
<el-drawer title="模块列表" :visible.sync="show" direction="rtl" size="40%" >
  <el-table height="100%" :data="modules" border style="width: 100%;" highlight-current-row>
    <el-table-column header-align="left" align="left" label="模块名称" width="100">
      <template slot-scope="scope">
        <el-input v-model="scope.row.name"></el-input>
      </template>
    </el-table-column>
    <el-table-column header-align="left" align="left" label="模块程序集(.dll)">
      <template slot-scope="scope">
        <el-input v-model="scope.row.type"></el-input>
      </template>
    </el-table-column>
    <el-table-column header-align="center" align="center" width="40">
      <template slot="header">
        <el-button type="text" icon="el-icon-circle-plus" @click="add"></el-button>
      </template>
      <template slot-scope="scope">
        <el-button type="text" icon="el-icon-remove" @click="remove(scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
</el-drawer>
</template>
<script>
export default {
  name: "moduleList",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    modules: {
      type: Array,
      default(){
        return [];
      }
    }
  },
  data() {
    return {
    };
  },
  watch: {
  },
  computed: {
    show: {
      get(){
        return this.visible;
      },
      set(val){
        this.$emit("update:visible", val)
      }
    }
  },
  created() {

  },
  methods: {
    add(){
      this.modules.push({
        name: '',
        type: ''
      });
    },
    remove(item){
      this.modules.remove(item);
    },
    getObject(){
      let obj = {};
      this.modules.forEach(item => {
        obj[item.name] = item.type;
      });
      return obj;
    }
  }
};
</script>
